<template>
    <view class="box">
        <view class="box-bg">
            <div class="nav">
                <navigator class="outu" target="" hover-class="" delta="1" open-type="navigateBack">
                    <uni-icons class="icon" @click="back" color="#fff" ; type="back" size="30"></uni-icons>
                </navigator>
                <text class="navhead">
                    {{ newnew !=='用户732131' ? '张先生' : '一米阳光' }}</text>
            </div>
        </view>

        <view class="boxa">
            <view class="boxx">
                <scroll-view scroll-y class="danmu scroll_list" scroll-with-animation="true" :scroll-into-view="getId()">
                    <view class="boxxa">
                        <view class="wu">
                            米
                        </view>
                        <view class="commit">
                            您好,您发布的房子，我想具体咨询一下
                        </view>
                    </view>

                    <view v-for="(item, index) in data.messageData" :key="index" :id="item.id" class="boxx_a">
                        <view class="box_aa">
                            <view class="wo">
                                {{ item.name }}
                            </view>
                            <view class="comment">
                                {{ item.comment }}
                            </view>
                        </view>

                    </view>

                    <view v-for="(item, index) in newob" :key="index" :id="item.id" class="boxxaa">
                        <view class="main_a">
                            <view class="wu">
                                {{ item.title }}
                            </view>
                            <view class="commit">
                                {{ item.name }}
                            </view>
                        </view>

                    </view>
                </scroll-view>
            </view>
            <view class="boxe">
                <input type="text" class="inp" v-model="data.inputValue" :focus="true">
                <button class="btn" @click="sendMsg()">发送</button>
            </view>
        </view>
    </view>
</template>

<script setup>
import { onLoad, onShow } from '@dcloudio/uni-app'
import { reactive, ref, toRefs } from 'vue'
const newlist = reactive([
    {
        id: '1123',
        name: '你好',
        title: '米'
    },
    {
        id: '1213',
        name: '哈喽',
        title: '米'
    },
    {
        id: '1263',
        name: '海淀区',
        title: '米'
    },
    {
        id: '1243',
        name: '一会聊儿～',
        title: '米'
    },
    {
        id: '1223',
        name: '晚安啦～',
        title: '米'
    }
]);
console.log(newlist);
const newdatalist = reactive({
    newob: []
});
const { newob } = toRefs(newdatalist);

console.log(newdatalist);

const data = reactive({
    user: '',
    inputValue: '',
    messageData: [
        {
            id: 'qwe',
            name: '我',
            comment: '哪个小区的房子?',
        }
    ]
})
// 生成随机id
const getUuid = () => {
    var s = [];
    var hexDigits = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
    for (var i = 0; i < 16; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
    }
    let uuid = s.join("")
    return uuid
}
const newnew = ref('');
onLoad(() => {
    // 从本地获取存储的消息
    const name = uni.getStorageSync('user');
    data.user = name.nickname
     newnew.value = JSON.parse(name).nickname;
    console.log(newnew.value, '======================================>');
    initSocket()
    // console.log(options,'=============================》');
})


const getId = () => {
    return data.messageData[data.messageData.length - 1].id
}

const initSocket = async () => {
    // 建立连接
    uni.connectSocket({
        url: 'ws://10.31.71.52:9000'
    });
    // 监听WebSocket连接事件
    uni.onSocketOpen((res) => {
        console.log('WebSocket连接已打开！');
    });
    // 监听WebSocket 错误
    uni.onSocketError((res) => {
        console.log('WebSocket连接打开失败，请检查！错误信息：', res);
    });
    // 监听WebSocket服务器接收的消息
    uni.onSocketMessage((res) => {
        console.log('收到服务器内容：' + res.data);
        // 将接收到的消息添加到数组
        data.messageData.push({
            id: getUuid(),
            // 转为对象
            ...JSON.parse(res.data)
        })
        inputkon();
        console.log(data.messageData);
    });
    // 关闭 WebSocket 
    uni.onSocketClose(function (res) {
        console.log('WebSocket 已关闭！');
    });
}

const sendMsg = async () => { // 发送消息
    uni.sendSocketMessage({ // 开始发送socket消息
        data: JSON.stringify({
            name: '我',
            comment: data.inputValue,
        })
    });
    console.log(data.inputValue);
    const newData = newlist.filter((item) => item.name.includes(data.inputValue));
    newdatalist.newob.push(...newData);
    // console.log(newob, '==============');
}

const inputkon = () => {
    data.inputValue = '';
}
</script>

<style lang="scss" scoped>
.box {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;

    .box-bg {
        width: 100vw;
        height: 100px;
        background: linear-gradient(to right, #3e85ef, rgba(46, 175, 255));
        display: flex;
        position: relative;
    }

    .nav {
        width: 100vw;
        height: 100%;
        text-align: center;
        color: #fff;
        line-height: 100px;
    }

    .icon {
        position: relative;
        font-size: 15px;
        right: 148px;
        top: 9px;
    }

    .navhead {
        position: absolute;
        left: 45%;
        top: 6%;
    }
}

.boxa {
    width: 100vw;
    height: 100%;

    .boxc {
        position: fixed;
        width: 50vw;
        height: 70vh;
        left: 50%;
        top: 50%;
        z-index: 999;
        transform: translate(-50%, -50%);
        margin-left: -100px;

        .scroll_list {
            height: 100%;
            width: 100%;
        }
    }

    .boxe {
        width: 100vw;
        height: 62px;
        background-color: #ccc;
        opacity: 0.5;
        position: relative;
        top: 89%;

        .inp {
            width: 75vw;
            height: 35px;
            border: 1px solid #000;
            margin-top: 8px;
            float: left;
            border-radius: 5px;
            border-right: none;
            background: #fff;
            margin-left: 7px;
        }

        .btn {
            width: 20%;
            height: 35px;
            float: right;
            border: none;
            background-color: green;
            color: #fff;
            line-height: 35px;
            margin-top: 9px;
            margin-right: 3px;
        }
    }
}

.boxx {
    position: fixed;
    width: 100vw;
    height: 70vh;
    left: 50%;
    top: 50%;
    z-index: 999;
    transform: translate(-50%, -50%);

    .scroll_list {
        height: 100%;
        width: 100%;

        .boxx_a {
            width: 100vh;
            height: 50px;

            .box_aa {
                width: 100vh;
                height: 100%;
                float: right;
                margin-top: 3px;
            }
        }


        .boxxaa {
            width: 100vh;
            height: 50px;
            float: left;
            margin-top: 3px;

        }

    }
}

.wo {
    width: 30px;
    height: 30px;
    text-align: center;
    background-color: aquamarine;
    line-height: 30px;
    font-size: 15px;
    margin-left: 50vh;
    border-radius: 50%;
    color: #fff;
}

.comment {
    font-size: 15px;
    width: 170px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    background-color: green;
    opacity: 0.8;
    border-radius: 15px;
    color: #fff;
    float: left;
    margin-top: -25px;
    margin-left: 23vh;
}

.wu {
    width: 30px;
    height: 30px;
    text-align: center;
    background-color: #3e85ef;
    line-height: 30px;
    font-size: 15px;
    border-radius: 50%;
    margin-right: 100px;
    margin-left: 8px;
}

.commit {
    font-size: 15px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    background-color: green;
    opacity: 0.8;
    border-radius: 15px;
    color: #fff;
    float: left;
    margin-top: -25px;
    margin-left: 50px;
}
</style>